<template>
  <div class="content">
    <div class="top">
      <div class="top-form">
        <el-input
          v-model="form.communityname"
          placeholder="请输入发布小区"
          style="margin-left: 0"
        ></el-input>
        <el-input
          v-model="form.title"
          placeholder="请输入公告主题"
          clearable
        ></el-input>
        <el-input
          v-model="form.content"
          placeholder="请输入发布内容"
          clearable
          style="width: 30%"
        ></el-input>
        <el-button
          type="success"
          @click="add"
          class="postButton"
          icon="el-icon-plus"
          v-if="this.type == 1"
          >发布公告</el-button
        >
        <el-button type="primary" @click="reset" class="postButton"
          >重置</el-button
        >
      </div>
    </div>

    <!-- 主要表格 -->
    <div class="contain">
      <div class="tab">
        <el-tabs type="border-card" v-model="activeName">
          <el-tab-pane
            label="公告信息"
            name="post"
            style="background-color:white"
          >
            <div class="down-form">
              <div class="table">
                <el-table
                  ref="logTable"
                  :data="tableData"
                  v-loading="loading"
                  border
                  :header-cell-style="{
                    background: '#eef1f6',
                    color: '#1f2d3d',
                    'border-color': '#dfe6ec',
                  }"
                  style="width: 100%;font-size: 14px;color: #1f2d3d"
                >
                  <el-table-column
                    type="index"
                    label="序号"
                    align="center"
                    width="70"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="title"
                    label="公告主题"
                    min-width="15%"
                    show-overflow-tooltip
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="content"
                    label="公告内容"
                    min-width="30%"
                    show-overflow-tooltip
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="createtime"
                    label="发布时间"
                    sortable
                    min-width="15%"
                    show-overflow-tooltip
                    :formatter="dateFormat"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="communityname"
                    label="小区名称"
                    min-width="9%"
                    align="center"
                  >
                  </el-table-column>
                  <!--管理员-->
                  <el-table-column
                    v-if="this.type == 1"
                    prop=""
                    label="操作"
                    min-width="11%"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <div style="display: flex;margin-left: 3px">
                        <el-button
                          :plain="true"
                          size="mini"
                          type="danger"
                          style="font-size: 12px;color: #fff;background-color: #ff4949;border-color: #ff4949"
                          @click="del(scope.row, scope.$index)"
                          ><i class="el-icon-delete"></i>归档</el-button
                        >
                        <el-button
                          :plain="true"
                          size="mini"
                          type="primary"
                          style="color: #fff;font-size: 12px;background-color: #20a0ff;border-color: #20a0ff"
                          @click="detail(scope.row)"
                          ><i class="el-icon-zoom-in"></i>查看公告</el-button
                        >
                      </div>
                    </template>
                  </el-table-column>
                  <!--普通用户-->
                  <el-table-column
                    v-else
                    label="操作"
                    min-width="11%"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <div>
                        <el-button
                          :plain="true"
                          size="mini"
                          type="primary"
                          style="color: #fff;font-size: 12px;background-color: #20a0ff;border-color: #20a0ff"
                          @click="detail(scope.row)"
                          ><i class="el-icon-zoom-in"></i>查看公告</el-button
                        >
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="block">
                <el-pagination
                  @current-change="handleCurrentChange"
                  layout="total, sizes,prev, pager, next, jumper"
                  :current-page.sync="iPagination.current"
                  :page-size="iPagination.pageSize"
                  :page-sizes="iPagination.pageSizeOptions"
                  :total="iPagination.total"
                  background
                  @size-change="handleSizeChange"
                >
                </el-pagination>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!-- 模态框 -->
    <el-dialog title="公告详情" :visible.sync="dialogFormVisible">
      <el-form :model="dialog">
        <el-form-item label="小区名称" :label-width="formLabelWidth">
          <el-input
            v-model="dialog.communityname"
            autocomplete="off"
            style="width: 200px;margin-right: 50px;"
            readonly
          ></el-input>
          <span>发布时间</span>
          <el-input
            placeholder="请选择日期"
            prefix-icon="el-icon-date"
            style="width: 200px"
            v-model="dialog.createtime"
            readonly
          >
          </el-input>
        </el-form-item>
        <el-form-item label="公共主题" :label-width="formLabelWidth">
          <el-input
            v-model="dialog.communityname"
            autocomplete="off"
            style="width: 85%;"
            readonly
          ></el-input>
        </el-form-item>
        <el-form-item label="公共主题" :label-width="formLabelWidth">
          <el-input
            style="width: 85%;margin-left: 10px;"
            type="textarea"
            :rows="5"
            placeholder="请输入内容"
            v-model="dialog.content"
          >
          </el-input>
        </el-form-item>
        <div style="margin-left: 55px;margin-top: 20px;">
            公告状态
            <span style="padding: 10px 15px; border: 1px solid #eee; border-radius: 5px;margin-left: 10px;">阅读量</span>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible = false"
          >关闭</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment";
export default {
  name: "post",
  data() {
    return {
      type: "",
      activeName: "post",
      form: {
        communityname: "",
        title: "",
        content: "",
      },
      tableData: [],
      iPagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: [5, 10, 20, 50, 100],
        total: 0,
        page: 0,
        pageSize: 10,
      },
      loading: false,
      //模态框
      dialogFormVisible: false,
      formLabelWidth: "120px",
      dialog: {},
    };
  },
  created() {
    let token = sessionStorage.token;
    this.$axiosToken({
      url: "/users/getUserByToken",
      method: "get",
      data: {},
      success: (result) => {
        this.type = result.type;
      },
    });
  },
  mounted() {
    this.getPoster();
  },
  methods: {
    // 分页导航
    handleCurrentChange(val) {
      this.iPagination.current = val;
      this.getPoster();
    },
    handleSizeChange(val) {
      this.iPagination.current = 1;
      this.iPagination.pageSize = val;
      this.getPoster();
    },
    // 公告列表
    getPoster() {
      this.loading = true;
      this.$Axios({
        url: "/poster/getPosterData",
        method: "get",
        data: {
          currPage: this.iPagination.current - 1,
          pageNum: this.iPagination.pageSize,
        },
        success: (result) => {
          this.tableData = result.data;
          this.iPagination.total = result.total;
          setTimeout(() => {
            this.loading = false;
          }, 200);
        },
      });
    },
    // 发布公告
    add() {
      if (
        this.form.communityname == "" ||
        this.form.title == "" ||
        this.form.content == ""
      ) {
        this.$alert("请确保发布的公告内容是否填写完整", "公告内容不全", {
          confirmButtonText: "确定",
        });
      } else {
        this.$axiosToken({
          url: "/poster/addPoster",
          method: "post",
          data: {
            communityname: this.form.communityname,
            title: this.form.title,
            content: this.form.content,
          },
          success: (result) => {
            this.$message({
              message: "发布公告成功",
              type: "success",
              duration: 2000,
            });
            this.getPoster();
            this.reset();
          },
        });
      }
    },
    // 清空输入框
    reset() {
      this.form = {
        communityname: "",
        title: "",
        content: "",
      };
      this.getPoster();
    },
    // 删除公告
    del(row, index) {
      this.$confirm("确定永久归档这条公告？", "提示", {
        type: "warning",
      })
        .then(() => {
          this.$axiosToken({
            url: "/poster/delPoster",
            method: "get",
            data: { p_id: row.p_id },
            success: (result) => {
              this.$message({
                message: "删除该公告信息成功",
                type: "success",
                duration: 2000,
              });
              this.getPoster();
            },
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消归档该公告",
            duration: 2000,
          });
        });
    },
    detail(row) {
      this.dialogFormVisible = true;
      this.dialog = JSON.parse(JSON.stringify(row));
      this.dialog.createtime = row.createtime.split("T")[0]
    },
    // 时间格式转化
    dateFormat(row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      } else {
        return moment(date).format("YYYY-MM-DD HH:mm:ss");
      }
    },
  },
};
</script>

<style scoped>
::v-deep .el-input__inner {
  font-size: 14px;
  height: 36px;
}

.el-input {
  width: 21%;
  margin-left: 10px;
}

::v-deep .el-input__icon.el-range__icon.el-icon-date {
  line-height: 27px;
}

.el-select {
  width: 21%;
}

.postButton {
  margin-left: 15px;
  width: 8%;
  font-size: 14px;
  color: #fff;
}

.tab {
  margin-top: 15px;
}

.block {
  float: right;
  margin-top: 10px;
}

::v-deep .el-input.el-input--mini.el-input--suffix > .el-input__inner {
  height: 28px;
}

::v-depp .el-button--mini,
.el-button--small {
  border-radius: 5px;
}
</style>
